<!DOCTYPE html>
<html lang="en">

<head>
	<title>Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/ken-burns.css" rel="stylesheet" type="text/css" media="all" /> <!-- 轮播图样式 -->
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
	<link rel="stylesheet" type="text/css" href="./css/home.css">

	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏固定 -->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script><!-- 过渡 -->
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.menu-aim.js"></script> <!-- 底部导航栏 -->
	<script src="js/main.js"></script><!-- 导航栏 -->
</head>

<body>

	<div class="header" id="header"></div>

	<!--轮播图-->
	<div class="banner">
		<div id="kb" class="carousel kb_elastic animate_text kb_wrapper" data-ride="carousel" data-interval="6000"
			data-pause="hover">

			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="images/5.jpg" alt="" class="img-responsive" />
					<div class="carousel-caption kb_caption kb_caption_right">
						<h3 data-animation="animated flipInX">Flat <span>50%</span> Discount</h3>
						<h4 data-animation="animated flipInX">Hot Offer Today Only</h4>
					</div>
				</div>
				<div class="item">
					<!-- Second-Slide -->
					<img src="images/8.jpg" alt="" class="img-responsive" />
					<div class="carousel-caption kb_caption kb_caption_right">
						<h3 data-animation="animated fadeInDown">Our Latest Fashion Editorials</h3>
						<h4 data-animation="animated fadeInUp">cupidatat non proident</h4>
					</div>
				</div>

				<div class="item">
					<!-- Third-Slide -->
					<img src="images/3.jpg" alt="" class="img-responsive" />
					<div class="carousel-caption kb_caption kb_caption_center">
						<h3 data-animation="animated fadeInLeft">End Of Season Sale</h3>
						<h4 data-animation="animated flipInX">cupidatat non proident</h4>
					</div>
				</div>

			</div>
			<!-- Left-Button -->
			<a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">
				<span class="fa fa-angle-left kb_icons" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<!-- Right-Button -->
			<a class="right carousel-control kb_control_right" href="#kb" role="button" data-slide="next">
				<span class="fa fa-angle-right kb_icons" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<script src="js/custom.js"></script>
	</div>
	<div id="app">
		<!--最新商品-->
		<div class="add-products">
			<div class="container">
				<h3 class="w3ls-title">最新商品</h3>
				<div class="add-products-row">
					<div class=" w3ls-add-grids" v-for="g in news">
						<a href="goodsDetail.html" @click="toGoodsDetail(g.id)">
							<img :src="g.commoditUrl">
							<p>{{g.title}}<span>${{g.price}}</span></p>
							<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
						</a>
					</div>
					<div class="clerfix"> </div>
				</div>
			</div>
		</div>

		<!--最热商品-->
		<div class="add-products">
			<h3 class="w3ls-title">热卖商品</h3>
			<div class="container">
				<div class="add-products-row">
					<div class=" w3ls-add-grids" v-for="g in hot">
						<a href="goodsDetail.html" @click="toGoodsDetail(g.id)">
							<img :src="g.commoditUrl">
							<p>{{g.title}}<span>${{g.price}}</span></p>
							<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="copy-right" id="foot"></div>
</body>
<script type="text/javascript" src="js/jquery-cookie-1.4.1.js"></script>
<script type="text/javascript" src="js/vue-2.6.11.js"></script>
<script type="text/javascript" src="js/axios-0.19.2.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/css" src="js/mobile/need/layer.css"></script>
<script type="text/javascript" src="js/home/home.js"></script>
</html>
<script>
	$(function(){
		$("#header").load("/header");
		$("#foot").load("/foot");
	});
</script>